import React, { useState, useEffect } from 'react';
// import { format } from '@/utils/datetime';
import { RadialBar, BidirectionalBar, Base } from '@ant-design/plots';
import { Scene, PolygonLayer, LineLayer, PointLayer, Popup } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
// import njgeo from '../../../public/njgeo2.json';

import { Row, Col, Card } from 'antd';
const Ekh: React.FC = () => {
  const config22 = {
    type: 'spaceLayer',
    data: [
      { letter: '公司存款存量', 资源合计: 18167 },
      { letter: '公司存款增量', 资源合计: 21492 },
      { letter: '价值客户', 资源合计: 32782 },
      { letter: '有效户', 资源合计: 14253 },
      { letter: '绿色、制造业', 资源合计: 12702 },
      { letter: '重点制造业客户', 资源合计: 32288 },
      { letter: '省市国企客户', 资源合计: 42015 },
      { letter: '创新业务', 资源合计: 6094 },
      { letter: '监测指标存贷比', 资源合计: 86966 },
      { letter: '机构存款', 资源合计: 90153 },
      { letter: '专项债托管存款', 资源合计: 80772 },
      { letter: '客户拓展', 资源合计: 44025 },
      { letter: '跨境结算', 资源合计: 22406 },
      { letter: '场景金融', 资源合计: 86749 },
      { letter: '供应链', 资源合计: 67507 },
      { letter: '结算手续费', 资源合计: 71929 },
      { letter: '境外债投资利润', 资源合计: 80095 },
      { letter: '债券承销', 资源合计: 15987 },
      { letter: '银租协同', 资源合计: 16327 },
      { letter: '机构理财', 资源合计: 49056 },
      { letter: '并购贷款', 资源合计: 52758 },
      { letter: '投行中收', 资源合计: 60978 },
      { letter: '同业投资规模', 资源合计: 32236 },
      { letter: '票据价差', 资源合计: 43015 },
      { letter: '托管规模及新增项目', 资源合计: 11974 },
      { letter: '托管收入', 资源合计: 40074 },
    ],
    children: [
      {
        type: 'interval',
        encode: { x: 'letter', y: '资源合计', color: 'letter' },
        transform: [{ type: 'sortX', reverse: true, by: 'y' }],
        scale: { color: { palette: 'cool', offset: (t: number) => t * 0.8 + 0.1 } },
      },
      {
        type: 'interval',
        x: 1000,
        y: 50,
        width: 200,
        height: 200,
        encode: { y: '资源合计', color: 'letter' },
        transform: [{ type: 'stackY' }],
        scale: { color: { palette: 'cool', offset: (t: number) => t * 0.8 + 0.1 } },
        coordinate: { type: 'theta' },
        legend: false,
      },
    ],
  };

  useEffect(() => {
    const scene = new Scene({
      id: 'map',
      map: new GaodeMap({
        style: 'light',
        pitch: 1,
        zoom: 4.4,
      }),
      logoVisible: false,
    });
    // 使用面图层来绘制行政区划数据
    const chinaPolygonLayer = new PolygonLayer({
      autoFit: true,
    })
      .source(njgeo)
      .color('name', ['rgb(189,215,231)'])
      .shape('fill')
      .style({
        opacity: 1,
      });
    //将其添加到 Scene 中进行显示
    scene.addLayer(chinaPolygonLayer);

    //  图层边界
    const layer2 = new LineLayer({
      zIndex: 2,
    })
      .source(njgeo)
      .color('rgb(93,112,146)')
      .size(0.6)
      .style({
        opacity: 1,
      });
    scene.addLayer(layer2);
    chinaPolygonLayer.active(true);
    chinaPolygonLayer.active({
      color: '#888',
    });
    const hightLayer = new LineLayer({
      zIndex: 4, // 设置显示层级
      name: 'hightlight',
    })
      .source({
        type: 'FeatureCollection',
        features: [],
      })
      .shape('line')
      .size(1)
      .color('red');
    scene.addLayer(hightLayer);

    chinaPolygonLayer.on('click', (feature) => {
      hightLayer.setData({
        type: 'FeatureCollection',
        features: [feature.feature],
      });
    });

    chinaPolygonLayer.on('mousemove', (e) => {
      const popup = new Popup({
        offsets: [0, 0],
        closeButton: true,
      })
        .setLnglat(e.lngLat)
        .setHTML(
          `<span>地区: ${e.feature.properties.name}</span><br><span>编码: ${e.feature.properties.adcode}</span>`,
        );
      scene.addPopup(popup);
    });
  }, []);

  const configR = {
    data: [
      { name: '绩效额度', star: 506 },
      { name: '营销费用', star: 805 },
      { name: '资源合计', star: 1311 },
    ],
    xField: 'name',
    yField: 'star',
    // maxAngle: 90,
    radius: 1,
    innerRadius: 0.2,
    style: {
      radius: 26, // 圆角
    },
    scale: {
      y: { nice: true },
    },
  };

  const data = [
    { country: '公司', 绩效额度: 14653.4, 营销费用: 14352.3 },
    { country: '机构', 绩效额度: 45113.4, 营销费用: 14532.3 },
    { country: '交银', 绩效额度: 15443.4, 营销费用: 12453.3 },
    { country: '投行', 绩效额度: 14543.4, 营销费用: 14532.3 },
    { country: '同业', 绩效额度: 45313.4, 营销费用: 78612.3 },
    { country: '托管', 绩效额度: 45313.4, 营销费用: 17860.3 },
    { country: '零售', 绩效额度: 68613.4, 营销费用: 67812.3 },
    { country: '个贷', 绩效额度: 54353.4, 营销费用: 17872.3 },
    { country: '普惠', 绩效额度: 45313.4, 营销费用: 78612.3 },
    { country: '调整', 绩效额度: 45313.4, 营销费用: 78612.3 },
    // { country: '机构存款', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '专项债托管存款', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '客户拓展', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '跨境结算', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '场景金融', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '供应链', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '结算手续费', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '境外债投资利润', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '债券承销', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '银租协同', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '机构理财', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '并购贷款', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '投行中收', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '同业投资规模', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '票据价差', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '托管规模及新增项目', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '托管收入', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: 'AUM及储蓄规模增量', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '零售客群综合营销', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '儿童金融客户', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '信用卡客户', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '活动举办品牌推广', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '全行物料统一制作', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '按揭', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '一手房渠道营销', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '京e贷', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '普惠贷款', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '普惠结算存款', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '代发', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '客户积分', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '价格系数调整', '绩效额度': 13.4, '营销费用': 12.3, },
    // { country: '打分系数调整', '绩效额度': 13.4, '营销费用': 12.3, },
  ];
  const config1 = {
    data,
    xField: 'country',
    yField: ['绩效额度', '营销费用'],
    style: {
      fill: (d: { groupKey: string }) => {
        if (d.groupKey === '营销费用') return '#64DAAB';
        return '#6395FA';
      },
    },
  };
  return (
    <>
      <Row gutter={16}>
        <Col span={6}>
          <Row gutter={[8, 16]}>
            <Col span={24}>
              <Card title="分行资源情况" bordered={true} size="small">
                <div style={{ height: 'auto', width: 'auto', marginBottom: 10 }}>
                  {/* <>营销费用：100 万元</> */}
                  <RadialBar {...configR} />
                </div>
                {/* <div style={{ marginBottom: 10 }}>
                  <>资源总计：100 万元</>
                  <Liquid {...config} />
                </div>
                <div style={{ marginBottom: 10 }}>
                  <>绩效额度：100 万元</>
                  <Liquid {...config} />

                </div>
                <div style={{ marginBottom: 10 }}>
                  <>营销费用：100 万元</>
                  <Liquid {...config} />
                </div> */}
              </Card>
            </Col>
          </Row>
        </Col>
        <Col span={12}>
          <Card title="经营单位分布" bordered={true} size="small">
            <div style={{ height: '500px', width: '500px' }}>
              <div
                id="map"
                style={{
                  height: '500px',
                  width: '600px',
                  position: 'relative',
                  justifyContent: 'center',
                }}
              />
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card title="条线资源情况" bordered={true} size="small" style={{ height: 'auto' }}>
            <div style={{ height: 'auto', width: 'auto', marginBottom: 10 }}>
              {/* <>营销费用：100 万元</> */}
              <BidirectionalBar {...config1} />
            </div>
          </Card>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Base {...config22} />
        </Col>
      </Row>
    </>
  );
};

export default Ekh;
